<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>水资源管理</title>

    <link rel="stylesheet" href="assets/css/jquery.tree-multiselect.min.css">

    <link rel="stylesheet" href="assets/css/bootstrap.css"/>
    <link rel="stylesheet" href="assets/css/font-awesome.css"/>
    <link rel="stylesheet" href="assets/css/custom-styles.css"/>
    <link href="assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.1/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="assets/css/bootoast.css">
    <!-- 可视化提示框 -->
    <link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet"/>

    <!--script src="assets/js/jquery-1.10.2.js"></script-->
    <!--script src="assets/js/jquery-1.11.3.min.js"></script-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    <script src="assets/js/jquery-ui.min.js"></script>
    <script src="assets/js/jquery.tree-multiselect.min.js"></script>

    <script src="assets/js/packages/angular.min.js"></script>

    <!--导航条-->
    <script src="pages/js/left_nav.js"></script>

    <script src="assets/js/bootstrap.min.js"></script>
    <!--表格-->
    <script src="https://unpkg.com/bootstrap-table@1.14.1/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <!--提示框-->
    <script src="assets/js/bootoast.js"></script>
    <!--确认框-->
    <script src="assets/js/bootbox.all.min.js"></script>
    <!--动态表盘-->
    <script src="assets/js/easypiechart.js"></script>
    <script src="assets/js/easypiechart-data.js"></script>

    <!-- 时间组件 -->
    <link href="assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <script src="assets/js/moment-with-locales.js"></script>
    <script src="assets/js/bootstrap-datetimepicker.min.js"></script>
    <script src="assets/js/bootstrap-datetimepicker.zh-CN.js"></script>

    <!--  Morris Chart Js -->
    <script src="assets/js/morris/raphael-2.1.0.min.js"></script>
    <script src="assets/js/morris/morris.js"></script>

    <!-- 下拉框 -->
    <script src="assets/js/bootstrap-select.min.js"></script>
    <script src="assets/js/locales/defaults-zh_CN.min.js"></script>

    <!-- 导出下载 -->
    <script src="assets/js/bootstrap-table-export.js"></script>
    <script src="assets/js/tableExport.js"></script>

    <!-- date -->
    <script src="assets/js/date.js"></script>


    <script src="index.js"></script>

    <!-- 输入框插件 -->
    <script src="bootstrap_editable/js/bootstrap-editable.js"></script>
    <script src="bootstrap_editable/js/bootstrap-table-editable.js"></script>
    <link href="bootstrap_editable/css/bootstrap-editable.css" rel="stylesheet"/>

    <!-- 导出插件 -->
    <script type="text/javascript" src="tableExport/libs/FileSaver/FileSaver.min.js"></script>
    <script type="text/javascript" src="tableExport/libs/js-xlsx/xlsx.core.min.js"></script>
    <script type="text/javascript" src="tableExport/tableExport.min.js"></script>


    <link rel ="stylesheet" href="css/index.css" />
    <script src="assets/js/gifuct-js.min.js"></script>


</head>
<body>
<nav id="header" class="navbar-default top-navbar"></nav>
<nav id='navbar' class="navbar-default navbar-side">
    <!-- 隐藏导航条 -->
    <!-- <div id="sideNav" href="#">
        <i class="fa fa-caret-right"></i>
    </div>

    <div class="sidebar-collapse" ng-app="myApp" ng-controller="menuCtrl">
       <ul class="nav nav-second-level" id="main-menu" ng-repeat="menuItem1 in menuItem" >
       <li><a id={{menuItem1.href}} href="#" onclick = "load1(id)"><i class="fa fa-edit"></i>{{menuItem1.name}}</a></li> -->
    <!--  <li  ng-if="{{menuItem1.subs}} == null"><a id={{menuItem1.href}} href="#" onclick = "load1(id)"><i class="fa fa-edit"></i>{{menuItem1.name}}</a></li>
     <li ng-if="{{menuItem1.subs}} != null">
         <a href="#"><i class="fa fa-sitema"></i>{{menuItem1.name}}<span
             class="fa arrow"></span></a>
         <ul class="nav nav-second-level" ng-repeat="menuItem2 in menuItem.subs">
            <li ng-if="{{menuItem1.subs}} == null"><a id={{menuItem2.href}} href="#" onclick = "load1(id)"><i class="fa fa-edit"></i>{{menuItem2.name}}</a></li>
            <li ng-if="{{menuItem1.subs}} != null">
               <a href="#"><i class="fa fa-sitema"></i>{{menuItem2.name}}<span
                   class="fa arrow"></span></a>
               <ul class="nav nav-second-level" ng-repeat="menuItem3 in menuItem.subs.subs">
                  <li><a id={{menuItem3.href}} href="#" onclick = "load1(id)"><i class="fa fa-edit"></i>{{menuItem3.name}}</a></li>
               </ul>
         </ul>
     </li>
   </ul>
</div>  -->
</nav>

<div id="page-wrapper">
    <script src="assets/js/go.js"></script>
    <script id="code">
        var textArry1={
            id: "1",
            name: "风机",
            height: "140",
            data: [
                {src:'./image/feng/2.png',classifty:'img',category:'风机1',type:2,key:'fegn1',width:80,height:80},
                {src:'./image/feng/3.png',classifty:'img',category:'风机2',type:2,key:'fegn2',width:80,height:80},
            ]
        }
        var textArry2={
            id: "2",
            name: "管道",
            height: "260",
            data: [
                {src:'./image/guang/pipe2.svg',classifty:'img',category:'管道2',type:2,key:'guang2',width:80,height:80},
                {src:'./image/guang/pipe3.svg',classifty:'img',category:'管道3',type:2,key:'guang3',width:80,height:80},
                {src:'./image/guang/pipe4.svg',classifty:'img',category:'管道4',type:2,key:'guang4',width:80,height:80},
                {src:'./image/guang/pipe5.svg',classifty:'img',category:'管道5',type:2,key:'guang5',width:80,height:80},
                {src:'./image/guang/pipe6.svg',classifty:'img',category:'管道6',type:2,key:'guang6',width:80,height:80},
            ]
        }
        var textArry3={
            id: "3",
            name: "开关",
            height: "100",
            data: [
                {src:'./image/open/1off.png',classifty:'img',category:'开关1',type:2,key:'open1',width:80,height:80},
                {src:'./image/open/1on.png',classifty:'img',category:'开关2',type:2,key:'open2',width:80,height:80},
            ]
        }
        var textArry4={
            id: "4",
            name: "其他",
            height: "320",
            data: [
                {src:'./image/other/1.png',classifty:'img',category:'图片1',type:2,key:'other1',width:80,height:67},
                {src:'./image/other/2.png',classifty:'img',category:'图片2',type:2,key:'other2',width:80,height:61},
                {src:'./image/other/3.png',classifty:'img',category:'图片3',type:2,key:'other3',width:80,height:152},
                {src:'./image/other/4.gif',classifty:'img',category:'图片4',type:2,key:'other4',width:80,height:80},
                {src:'./image/other/5.jpg',classifty:'img',category:'图片5',type:2,key:'other5',width:80,height:54}
            ]
        }
        var textArry5={
            id: "5",
            name: "文字控件",
            height: "140",
            data: [
                {key:"onwText", category:"文字一",classifty:"textShape",type:3,color:"#1E9FFF",textColor:"#fff",text:"文字"},
                {key:"twoText", category:"文字二",classifty:"textShape",type:3,color:"#569bd5",textColor:"#fff",text:"文字"},
                {key:"threeText", category:"文字三",classifty:"textShape",type:3,color:"#a9a9e9",textColor:"#fff",text:"文字"},
                {key:"fourBtn", category:"文字四",classifty:"textShape", type:4,color:"#a9a9e9",textColor:"#fff",text:"文字"}
            ]
        };
        var classifylist=[];

        function init() {
            menusList();
            objGo = go.GraphObject.make; // 创建画布
            myDiagram = objGo(go.Diagram, "myDiagramDiv", // 必须命名或引用div html元素
                {
                    "initialContentAlignment": go.Spot.Center, // 居中显示
                    "allowDrop": true,  // 允许拖拽
                    "grid.visible": false,
                    "allowHorizontalScroll": true,// 禁止水平拖拽
                    "allowVerticalScroll": true,//禁止垂直拖动画布
                    "isReadOnly": true, // 只读画布内容
                });

            myDiagram.linkTemplate =
                objGo(go.Link,
                    { routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 10, reshapable: true, toShortLength: 7 },
                    new go.Binding("points").makeTwoWay(),
                    objGo(go.Shape, { isPanelMain: true, stroke: "#1E9FFF", strokeWidth: 6 }),// 线的边
                    objGo(go.Shape, { isPanelMain: true, stroke: "#3a77e2", strokeWidth: 4 }), // 线的背景颜色
                    objGo(go.Shape, { isPanelMain: true, stroke: "#f5f5f5", strokeWidth: 2, name: "PIPE", strokeDashArray: [10, 10] }), // 中间流动的
                    objGo(go.Shape, { toArrow: "Triangle", fill: "#3a77e2", stroke: null }), // 箭头的颜色
                );

            sharedToolTip =
                objGo(go.Adornment, "Auto",
                    objGo(go.Shape, "RoundedRectangle", { fill: "lightyellow" }),
                    objGo(go.TextBlock, { margin: 2 },
                        new go.Binding("text",  "" , function(d) { return d.category; })));

            nodeResizeAdornmentTemplate =
                objGo(go.Adornment, "Spot",
                    { locationSpot: go.Spot.Right },
                    objGo(go.Placeholder),
                    objGo(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" }),
                    objGo(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),
                    objGo(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" }),

                    objGo(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),
                    objGo(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),

                    objGo(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" }),
                    objGo(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),
                    objGo(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" })
                );

            nodeRotateAdornmentTemplate =
                objGo(go.Adornment,
                    { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
                    objGo(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "lightblue", stroke: "deepskyblue" }),
                    objGo(go.Shape, { geometryString: "M4.2 8 L4.2 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.0, strokeDashArray: [4, 2] })
                );

            // 根据数据定义菜单分类
            paletteArry=[]

            for(var item of classifylist){
                let contentDataImg={};
                contentDataImg.paletteDefine=new go.Palette("classify-"+item.id);
                contentDataImg.id=item.id;
                contentDataImg.data=item.data;
                for(var itemm of item.data){ // 每个分类里的图片
                    var node;
                    if(itemm.classifty=="img"){

                        node =objGo(go.Node, "Spot", nodeStyle(),
                            objGo(go.Panel, "Auto",
                                { name: "PANEL" },
                                new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
                                objGo(go.Shape, "Rectangle",  // default figure
                                    {
                                        portId: "",
                                        fromLinkable: true, margin:0,toLinkable: true, cursor: "pointer",
                                        fill: "rgba(70,113,196,0)",  // default color
                                        strokeWidth: 0
                                    },
                                ),
                                objGo(go.Picture,
                                    { width:itemm.width-5,height:itemm.height-5},
                                    new go.Binding("source"),
                                    new go.Binding("width"),
                                    new go.Binding("height"),
                                ),
                            ),
                            makePort("top", go.Spot.Top, true, true),
                            makePort("left", go.Spot.Left, true, true),
                            makePort("right", go.Spot.Right, true, true),
                            makePort("botton", go.Spot.Bottom, true, true),
                            {
                                mouseEnter: function(e, node) { showSmallPorts(node, true); },
                                mouseLeave: function(e, node) { showSmallPorts(node, false); }
                            }
                        );
                    } else if(itemm.classifty=="shape"){
                        node =objGo(go.Node, "Spot", nodeStyle(),
                            objGo(go.Shape, "Rectangle",
                                { strokeWidth:1, fill: "#8fbdee"},
                                new go.Binding("figure")),
                            makePort("top", go.Spot.Top, true, true),
                            makePort("left", go.Spot.Left, true, true),
                            makePort("right", go.Spot.Right, true, true),
                            makePort("botton", go.Spot.Bottom, true, true),
                            {
                                mouseEnter: function(e, node) { showSmallPorts(node, true); },
                                mouseLeave: function(e, node) { showSmallPorts(node, false); }
                            }
                        );
                    } else if(itemm.classifty=="textBlock"){
                        node = objGo(go.Node, "Spot",nodeStyle(),
                            objGo(go.TextBlock,
                                {
                                    font: "normal 11pt Helvetica, Arial, sans-serif",
                                    margin: 8,
                                    maxSize: new go.Size(160, NaN),
                                    editable: true,stroke:"#0A7EF7",
                                },
                                new go.Binding("text").makeTwoWay(),
                                new go.Binding("stroke","color"),
                            )
                        );
                    } else if(itemm.classifty=="textShape"&&itemm.type==4){
                        node=objGo(go.Node, "Horizontal",nodeStyleNo(),
                            { background: "#c1c4ee" },
                            objGo(go.TextBlock,
                                // 文字周围的空隙, 大号字体, 白色笔画:
                                {
                                    font: "normal 11pt Helvetica, Arial, sans-serif",
                                    margin: 6,
                                    maxSize: new go.Size(160, 25),
                                    wrap: go.TextBlock.WrapFit,
                                    editable: true,
                                    stroke:itemm.textColor,
                                },
                                new go.Binding("text").makeTwoWay()),
                            objGo(go.Panel, "Auto",
                                objGo(go.Shape, "Rectangle",
                                    {
                                        fill:"#1E9FFF",  // default color
                                        width:60,
                                        height:30,
                                        strokeWidth:0,
                                    },
                                ),
                                objGo(go.TextBlock,
                                    {
                                        font: "normal 11pt Helvetica, Arial, sans-serif",
                                        margin: 8,
                                        editable: true,
                                        text:"生效",
                                        stroke:"#fff"
                                    },
                                ),
                            ),

                            new go.Binding("strokeWidth"),
                        );
                    } else if(itemm.classifty=="textShape"){
                        node=objGo(go.Node, "Spot",nodeStyle(),
                            objGo(go.Panel, "Auto",
                                { name: "PANEL" },
                                new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
                                objGo(go.Shape, "Rectangle",
                                    {
                                        fill: itemm.color,  // default color
                                        strokeWidth: 0,
                                    },
                                    new go.Binding("strokeWidth"),
                                ),
                                objGo(go.TextBlock,
                                    {
                                        font: "normal 11pt Helvetica, Arial, sans-serif",
                                        margin: 8,
                                        maxSize: new go.Size(160, NaN),
                                        wrap: go.TextBlock.WrapFit,
                                        editable: true,
                                        stroke:itemm.textColor,
                                    },
                                    new go.Binding("stroke"),
                                    new go.Binding("text").makeTwoWay())
                            ),
                        );
                    }
                    myDiagram.nodeTemplateMap.add(itemm.category, node);
                }
                paletteArry.push(contentDataImg);
            }
            for(var itemList of paletteArry){
                itemList.paletteDefine.nodeTemplateMap = myDiagram.nodeTemplateMap;
                var nodeDataList=[];
                for(var itemChart of itemList.data){
                    if(itemChart.key.indexOf('开关')>=0){
                        nodeDataList.push( {key:itemChart.key,category: itemChart.category ,"source":itemChart.src,'text':''})
                    }
                    else if(itemChart.classifty=="img"){
                        nodeDataList.push( {key:itemChart.key,category: itemChart.category ,"source":itemChart.src})
                    } else if(itemChart.classifty=="shape"){
                        nodeDataList.push( {key:itemChart.key,category:itemChart.category, figure: itemChart.figure})
                    } else if(itemChart.classifty=="textBlock"){
                        nodeDataList.push({key:itemChart.key,category: itemChart.category})
                    } else if(itemChart.classifty=="textShape"){
                        nodeDataList.push({key:itemChart.key,category: itemChart.category ,text: itemChart.text})
                    }
                }
                itemList.paletteDefine.model.nodeDataArray = nodeDataList
            }
            setTimeout(function(){
                for(var itemList of paletteArry){
                    $("#classify-"+itemList.id).css('display',"none")
                }
            },100)

            load();
        }
        //菜单
        function menusList(){
            var menusHtml=''

            for(var item of classifylist){

                menusHtml =' <div class="classify-title" onclick="classifyShow('+item.id+')">'+item.name+'</div>'
                    +'<div id="classify-'+item.id+'" class="classify-title-content" style="height: '+item.height+'px" ></div>'
                $("#myPaletteDiv").append(menusHtml);

            }
        }
        // 菜单显示内容
        function classifyShow(showId){
            if( $("#classify-"+showId).css('display')=="block"){
                $("#classify-"+showId).css('display',"none");
                $(".classify-"+showId).css('display',"none");
            } else{
                $(".classify-title-content").css('display',"none")
                $("#classify-"+showId).css('display',"block");
                $(".classify-"+showId).css('display',"block");
            }
        }
        // 组件样式定义
        function nodeStyle() {
            return [new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
                { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
                new go.Binding("angle").makeTwoWay(),
                new go.Binding("isShadowed", "isSelected").ofObject(),
                {
                    selectionAdorned: false,
                    shadowOffset: new go.Point(0, 0),
                    shadowBlur: 15,
                    shadowColor: "#00a9c9",
                    toolTip: sharedToolTip
                }];
        }
        function nodeStyleNo() {
            return [new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
                new go.Binding("angle").makeTwoWay(),
                new go.Binding("isShadowed", "isSelected").ofObject(),
                {
                    selectionAdorned: false,
                    shadowOffset: new go.Point(0, 0),
                    shadowBlur: 15,
                    shadowColor: "#00a9c9",
                    toolTip: sharedToolTip
                }];
        }
        function showSmallPorts(node, show) {
            node.ports.each(function(port) {
                if (port.portId !== "") {  // don't change the default port, which is the big shape
                    port.fill = show ? "rgba(58,160,255,1)" : null;
                }
            });
        }

        // 默认连线的链接位置
        function makePort(name, spot, output, input) {
            let makePortWidth=10;
            var shapeStr = "";
            switch (name){
                case "top":shapeStr = "TriangleUp";break;
                case "right":shapeStr = "TriangleRight";break;
                case "botton":shapeStr = "TriangleDown";break;
                case "left":shapeStr = "TriangleLeft";break;
            }

            return objGo(go.Shape, shapeStr,
                {
                    fill: null,  // not seen, by default; set to a translucent gray by showSmallPorts, defined below
                    stroke: null,
                    strokeWidth:0,
                    desiredSize: new go.Size(makePortWidth, makePortWidth),
                    alignment: spot,  // align the port on the main Shape
                    alignmentFocus: spot,  // just inside the Shape
                    portId: name,  // declare this object to be a "port"
                    fromSpot: spot,  // declare where links may connect at this port
                    fromLinkable: output,  // declare whether the user may draw links from here
                    toSpot: spot,  // declare where links may connect at this port
                    toLinkable: input,  // declare whether the user may draw links to here
                    cursor: "pointer"  // show a different cursor to indicate potential link point
                });
        }

        function onSelectionChanged(e) {
            var node = e.diagram.selection.first();
            if (node instanceof go.Node) {
                updateProperties(node.data);
            } else {
                updateProperties(null);
            }
        }

        //RotatingTool用于通过设置GraphObject.angle属性以交互方式更改GraphObject的GraphObject.angle。
        function TopRotatingTool() {
            go.RotatingTool.call(this);
        }

        go.Diagram.inherit(TopRotatingTool, go.RotatingTool);

        TopRotatingTool.prototype.updateAdornments = function (part) {
            go.RotatingTool.prototype.updateAdornments.call(this, part);
            var adornment = part.findAdornment("Rotating");
            if (adornment !== null) {
                adornment.location = part.rotateObject
                    .getDocumentPoint(new go.Spot(0.5, 0, 0, -30)); // above middle top
            }
        };

        TopRotatingTool.prototype.rotate = function (newangle) {
            go.RotatingTool.prototype.rotate.call(this, newangle + 90);
        };

        // 设置线动态效果
        function flowLine(){
            var diagram = myDiagram;
            setTimeout(function() {
                var oldskips = diagram.skipsUndoManager;
                diagram.skipsUndoManager = true;
                diagram.links.each(function(link) {
                    var shape = link.findObject("PIPE");
                    var off = shape.strokeDashOffset - 2;
                    shape.strokeDashOffset = (off <= 0) ? 20 : off;
                });
                diagram.skipsUndoManager = oldskips;
                flowLine();
            }, 200);
        }
        // // 查看页面实现图片动态效果
        let gifPictureArray=[];
        function flowPictureGif(allPictureData){
            // 获取页面动态的地址
            var canvasHtml='';
            $("#canvasDiv").html('');
            for(var item of allPictureData){
                if(item.source&&item.source.substr(item.source.length-3)=='gif'){ // 判断是否是动图
                    $("#canvasDiv").append('<canvas id="myCanvas'+item.key+'"></canvas>');
                    let canvasContentDiv=document.getElementById('myCanvas'+item.key);
                    let canvasContent= canvasContentDiv.getContext('2d');
                    item.canvasDiv=canvasContentDiv;
                    item.canvasContent=canvasContent;
                    gifPictureArray.push(item);
                }
            }
            if(gifPictureArray.length>0){ // 界面中有动图
                // 把动图分割，取出每帧的效果
                for(var i=0;i<gifPictureArray.length;i++){
                    splitGifImg(i);
                }
            }
        }
        // 分割取出每个帧的图片内容
        var countGif=0; // 用于判断所有gif是否分割完毕
        function splitGifImg(indexNum){
            var oReq = new XMLHttpRequest();
            //var dd=gifPictureArray[indexNum].source.split('https://www.hiwooiotdev.top')[1];
            // var urlImg='http://192.168.0.103:90'+dd;
            oReq.open("GET", gifPictureArray[indexNum].source, true);
            //oReq.open("GET", urlImg, true);
            oReq.responseType = "arraybuffer";
            oReq.onload = function (oEvent) {
                var arrayBuffer = oReq.response;
                if (arrayBuffer) {
                    gif = new GIF(arrayBuffer);
                    loadedFrames = gif.decompressFrames(true); // 各帧内容
                    gifPictureArray[indexNum].loadedFrames=loadedFrames;
                    gifPictureArray[indexNum].numberLength=loadedFrames.length;
                    gifPictureArray[indexNum].frameIndex=0;
                    countGif+=1;
                    if(countGif==gifPictureArray.length){ // 每张图片的各帧已经取出完毕
                        gifRotate();// 控制gif图片自动旋转
                    }
                }
            };
            oReq.send(null);
        }
        // gif图片自动旋转的方法
        function gifRotate(){
            for(var i=0;i<gifPictureArray.length;i++){  // 开始每张动图的旋转
                renderFrame(gifPictureArray[i])
            }
        }
        function renderFrame(gifPicture){
            // get the frame
            var frame = gifPicture.loadedFrames[gifPicture.frameIndex];
            var start = new Date().getTime();
            if(!frame.base64){ // 字节流还没转为bae64
                if(!gifPicture.width){
                    gifPicture.width=80;
                    gifPicture.height=parseInt((frame.dims.height*80)/frame.dims.width)
                }
                gifPicture.canvasContent.clearRect(0,0,gifPicture.canvasDiv.width,gifPicture.canvasDiv.height);
                if(frame.dims.height!=gifPicture.canvasDiv.height){
                    gifPicture.canvasDiv.width = parseInt(frame.dims.width);
                    gifPicture.canvasDiv.height = parseInt(frame.dims.height);
                }
                var frameImageData = gifPicture.canvasContent.createImageData(frame.dims.width, frame.dims.height);
                frameImageData.data.set(frame.patch);
                gifPicture.canvasContent.putImageData(frameImageData,0,0);
                var image=new Image();
                image.src=gifPicture.canvasDiv.toDataURL();
                gifPicture.loadedFrames[gifPicture.frameIndex].base64=image.src
            }
            let nodeData = myDiagram.model.findNodeDataForKey(gifPicture.key);
            nodeData.source=frame.base64;
            nodeData.width=gifPicture.width;
            nodeData.height=gifPicture.height;
            myDiagram.model.updateTargetBindings(nodeData);
            gifPicture.frameIndex+=1;
            if(gifPicture.frameIndex >= gifPicture.numberLength){
                gifPicture.frameIndex = 0;
            }
            var end = new Date().getTime();
            var diff = end - start;
            setTimeout(function(){
                requestAnimationFrame(function(){renderFrame(gifPicture)});
                //renderFrame();
            }, Math.max(0, Math.floor(frame.delay - diff)));
        }

        var contentData={ "class": "go.GraphLinksModel",
            "linkFromPortIdProperty": "fromPort",
            "linkToPortIdProperty": "toPort",
            "nodeDataArray": [
                {"key":"other3", "category":"图片3", "source":"./image/other/3.png", "loc":"-270 -200", "size":"135 207", "width":130, "height":202},
                {"key":"other4", "category":"图片4", "source":"./image/other/4.gif", "loc":"560 -56"},
                {"key":"other5", "category":"图片5", "source":"./image/other/5.jpg", "loc":"480 -272", "size":"250 128", "width":245, "height":123},
                {"key":"onwText", "category":"文字一", "text":"水压", "loc":"-340 -184", "size":"45.319976806640625 30.875448608398436", "width":40, "height":25},
                {"key":"onwText2", "category":"文字一", "text":"水压高度：20", "loc":"-400 -136"},
                {"key":"other2", "category":"开关2", "source":"./image/other/2.png", "loc":"110 88"},
                {"key":"guang2", "category":"管道2", "source":"./image/guang/pipe2.svg", "loc":"-30 160", "angle":270},
                {"key":"guang22", "category":"管道2", "source":"./image/guang/pipe2.svg", "loc":"-100 24", "angle":90},
                {"key":"guang6", "category":"管道6", "source":"./image/guang/pipe6.svg", "loc":"-100 24"},
                {"key":"guang4", "category":"管道4", "source":"./image/guang/pipe4.svg", "loc":"-100 88"},
                {"key":"guang23", "category":"管道2", "source":"./image/guang/pipe2.svg", "loc":"40 160", "angle":270},
                {"key":"guang3", "category":"管道3", "source":"./image/guang/pipe3.svg", "loc":"-240 24"},
                {"key":"guang24", "category":"管道2", "source":"./image/guang/pipe2.svg", "loc":"-240 -40"},
                {"key":"fegn2", "category":"风机2", "source":"./image/feng/3.png", "loc":"20 -184"},
                {"key":"other1", "category":"图片1", "source":"./image/other/1.png", "loc":"230 -176", "size":"100 95", "width":95, "height":90},
                {"key":"other42", "category":"图片4", "source":"./image/other/4.gif", "loc":"-240 -144"},
                {"key":"open1", "category":"图片1", "source":"./image/open/1off.png", "loc":"350 0"}
            ],
            "linkDataArray": [
                {"from":"fegn2", "to":"other3", "fromPort":"left", "toPort":"", "points":[20,-146.5,10,-146.5,-57.5,-146.5,-57.5,-96.5,-125,-96.5,-135,-96.5]},
                {"from":"other1", "to":"fegn2", "fromPort":"left", "toPort":"", "points":[230,-128.5,220,-128.5,162.5,-128.5,162.5,-146.5,105,-146.5,95,-146.5]},
                {"from":"open1", "to":"other1", "fromPort":"top", "toPort":"botton", "points":[387.5,0,387.5,-10,387.5,-40.5,280,-40.5,280,-71,280,-81]}
            ]}

        function load(){
            if(sessionStorage.getItem('conetent')&&sessionStorage.getItem('conetent')!=''){
                contentData=JSON.parse(sessionStorage.getItem('conetent'))
            }
            myDiagram.model = go.Model.fromJson(contentData);
            flowPictureGif(contentData.nodeDataArray);
            flowLine();
            loadDiagramProperties(); // 在Model.modelData被带入内存后执行此操作
        }

        $(function () {

            //获取组件信息
            $.ajax({
                type:'get',
                url:'/chart/obtainComponentInformation',
                data:{
                    'businessId': label_id
                },
                dataType: 'json',
                async: false,
                contentType: "application/json; charset=utf-8",
                success: function (res) {
                    classifylist = [].concat(res.classifylist);
                    classifylist.push(textArry5);
                }
            })

            //获取图表模板
            $.ajax({
                type:'get',
                url:'/chart/checkSelect',
                data:{
                    'flowchartId': flowchartCheckId
                },
                dataType: 'json',
                async: false,
                contentType: "application/json; charset=utf-8",
                success: function (res) {
                    $.extend(true,contentData,res);
                }
            })

            classifylist.push(textArry1);
            classifylist.push(textArry2);
            classifylist.push(textArry3);
            classifylist.push(textArry4);
            classifylist.push(textArry5);
            init();// 初始化组件内容

        });


        function updateProperties(data1) {
            if (data1 === null) {
                document.getElementById("propertiesPanel").style.display = "none";
            } else {
                document.getElementById("propertiesPanel").style.display = "block";
                $("#form").empty();
                if(data1.name!=null){
                    properties(data1.work_id,data1.select_type,data1.name);
                }
            }
        }

        //  以JSON格式显示用户可编辑的图表模型
        // function load() {
        // 	myDiagram.model = go.Model.fromJson(document
        // 			.getElementById("mySavedModel").value);
        // 	loadDiagramProperties(); // 在Model.modelData被带入内存后执行此操作
        // }

        function loadDiagramProperties(e) {
            // 设置Diagram.initialPosition而不是Diagram.position，以处理初始化副作用
            var pos = myDiagram.model.modelData.position;
            if (pos)
                myDiagram.initialPosition = go.Point.parse(pos);
        }

        // $(document).ready(function () {
        // 	$.ajax({
        // 		type:'get',
        // 		url:"/chart/selectOne?id="+flowchartCheckId,
        // 		success:function(data){
        // 			init();
        // 			var id=data['result']['id'];
        // 			var chartName=data['result']['chartName'];
        // 			var _data=data['result']['data'];
        // 			myDiagram.model = go.Model.fromJson(_data);
        // 			loadDiagramProperties(); // 在Model.modelData被带入内存后执行此操作
        // 			document.getElementById("flowchart_name").value = chartName;
        // 		},
        // 	    error: function(){
        // 	    	bootoast({
        //                 message: '失败',
        //                 position: 'top',
        //                 type: 'danger',
        //                 timeout: 1.5,
        //             });
        // 	      }
        // 	})
        // })
        $("#btn_out").click(function() {
            $('#page-wrapper').load('pages/flowchart_table.html');
        });

        function properties(work_id,select_type,name){
            $.ajax({
                type:'get',
                url:"/chart/selectWater?name="+name,
                dataType: 'json',
                async: false,
                contentType: "application/json; charset=utf-8",
                success : function(data) {
                    if("state" in data){
                        document.getElementById("work_id").value = work_id;
                        document.getElementById("select_type").value = select_type;
                        document.getElementById("name").value = name;
                        bootoast({
                            message: data.msg,
                            position: 'top',
                            type: 'success',
                            timeout: 1.5,
                        });
                    }else{
                        document.getElementById("work_id").value = work_id;
                        document.getElementById("select_type").value = select_type;
                        document.getElementById("name").value = name;
                        for(var p in data.result){
                            if(p!="设备编号"){
                                var Odiv=document.createElement("div");             //创建一个div
                                var Ospan=document.createElement("span");          //创建一个span
                                var Oinput=document.createElement("input");

                                Odiv.setAttribute('class', 'input-group');
                                Odiv.style.margin="10px 10px 10px";
                                Ospan.setAttribute('class', 'input-group-addon');
                                Ospan.style.width="90px";
                                Ospan.appendChild(document.createTextNode(p));

                                Oinput.setAttribute('type', 'text');
                                Oinput.setAttribute('id', p);
                                Oinput.setAttribute('class', 'form-control');
                                Oinput.setAttribute('value', data.result[p]);
                                Oinput.setAttribute('readonly', 'readonly');
                                Oinput.setAttribute('background-color', '#ffffff');
                                Odiv.appendChild(Ospan);            //在div内创建一个span
                                Odiv.appendChild(Oinput);
                                $("#form").append(Odiv);
                            }
                        }
                    }
                },
                error: function(){
                    bootoast({
                        message: '错误',
                        position: 'top',
                        type: 'danger',
                        timeout: 1.5,
                    });
                }
            })
        }
    </script>


    <div id="sample" >
        <div class="input-group"
             style="margin: 10px 10px 20px; width: 250px;position: absolute">
            <span class="input-group-addon">流程图名称</span> <input type="text" readOnly="true"
                                                                id="flowchart_name" class="form-control">
        </div>
        <div id="toolbar" class="btn-group" style="margin: 10px 300px 20px">
            <button id="btn_out" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-log-out"
                  aria-hidden="true"></span>退出
            </button>
        </div>

        <div style="width: 100%; white-space: nowrap;">
		<span style="display: none; vertical-align: top; width: 150px">
			<div id="myPaletteDiv" style="border: solid 1px black; height: 800px"></div>
		</span>
            <span style="display: inline-block; vertical-align: top; width: 82%">
			<div id="myDiagramDiv" style="border: solid 1px black; height: 800px"></div>
		</span>
            <span
                    style="display: inline-block; vertical-align: top; width: 250px">
			<div id="propertiesPanel"
                 style="display: none; padding: 10px 10px 10px; width: 350px">
				<div class="input-group" style="margin:10px 20px 10px">
						<span class="input-group-addon" style="width:90px">车间名称</span>
						     <input type="text" id="work_id" class="form-control" readonly="readonly"/>
			    </div>
			    <div class="input-group" style="margin:10px 20px 10px">
						<span class="input-group-addon" style="width:90px">设备类型</span>
						     <input type="text" id="select_type" class="form-control" readonly="readonly"/>
			    </div>
				<div class="input-group" style="margin:10px 20px 10px">
						<span class="input-group-addon" style="width:90px">设备编号</span>
						     <input type="text" id="name" class="form-control" readonly="readonly"/>
			    </div>
				<div class="input-group" style="margin:10px 10px 10px">
				<form id="form" class="bs-example bs-example-form" role="form">

				</form>
				</div>
			</div>
		</span>


        </div>
        <div>
		<textarea id="mySavedModel"
                  style="width: 100%; height: 300px; display: none">
{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
 ],
  "linkDataArray": [
 ]}
    </textarea>
        </div>
        <div style="display: none" id="canvasDiv"></div>
    </div>

</div>

<script>
    $('#header').load('header.html');
    $('#navbar').load('navbar.html');
</script>

</body>
</html>